{{ define "admin/goodsCate/index.html" }}
    {{ template "admin/common/page_header.html" .}}
    <link rel="stylesheet" href="/static/ly/js/jquery-treegrid/jquery.treegrid.min.css">
    <link rel="stylesheet" href="/static/ly/js/bootstrap-table/bootstrap-table.css">


    <script type="text/javascript" src="/static/ly/js/jquery-treegrid/jquery.treegrid.min.js"></script>
    <script type="text/javascript" src="/static/ly/js/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="/static/ly/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>

    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a href="/admin/goodsCate/add" class="btn btn-primary">增加商品分类</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-hover " id="treeTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript">

        var data = {{.goodsCateList}}
            console.log(data)

        $(function () {
            var $table = $("#treeTable");
            $table.bootstrapTable({
                data: data,
                idField: 'Id',
                clickToSelect: true,
                singleSelect: true,//单选checkbox
                columns: [
                    {field: 'check', checkbox: true},
                    {title: '分类名称', field: 'Title', width: 200, align: 'left', sortable: true},
                    {
                        title: '分类图片',
                        field: 'CateImg',
                        width: 200,
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            if (row.CateImg !== "") {
                                return `<img src="/${row.CateImg}" class="rounded float-left"  onerror="this.src='/static/admin/images/lz.gif'">`
                            }
                            return `<img src="/static/admin/images/lz.gif" class="rounded float-left" >`
                        }
                    },
                    {
                        title: "状态",
                        field: "Status",
                        width: 200,
                        align: "left",
                        sortable: true,
                        formatter: function (value, row, index) {
                            if (row.Status === 1) {
                                return `<img src="/static/admin/images/yes.gif"  class="chStatus" data-id="${row.Status}" data-table="goods_cate" data-field="status" />`
                            }
                            return `<img src="/static/admin/images/no.gif"  class="chStatus" data-id="${row.Status}" data-table="goods_cate" data-field="status" />`
                        }
                    },
                    {title: "排序", field: "Sort", width: 200, align: "left", sortable: true},
                    {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        width: 200,
                        // events: {
                        //     'click #edit': function (e, value, row, index) {
                        //         $('#id').val(row.Id);
                        //         console.log(row.Id)
                        //
                        //     },
                        //     'click #delete': function (e, value, row, index) {
                        //         deleteInfo(row.Id);
                        //     }
                        // },
                        //data-toggle="modal" data-target="#editModal" 触发事件
                        formatter: function (value, row, index) {
                            var doc = `<a id="edit" href="/admin/goodsCate/edit?id=${row.Id}" class="btn btn-info btn-sm" >编辑</a>
                                <a id="delete" href="/admin/goodsCate/delete?id=${row.Id}" class="btn btn-danger btn-sm" style="margin-left:10px;">删除</a>`;
                            return doc;
                        }
                    }
                ],
                //在哪一列展开树形
                treeShowField: 'Title',

                //指定父id列
                parentIdField: 'Pid',
                onResetView: function (data) {
                    $table.treegrid({
                        initialState: 'collapsed', // 所有节点都折叠
                        // initialState: 'expanded',// 所有节点都展开，默认展开
                        treeColumn: 1,  //设置点击树形位置
                        // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                        // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                        onChange: function () {
                            // $table.bootstrapTable('resetWidth');//这个方法找不到
                        }
                    });
                    //只展开树形的第一级节点
                    //$table.treegrid('getRootNodes').treegrid('expand');
                },
            });
        });
    </script>

{{end}}